<template>
    <div class="storage">
        <Header class="header"/>
        <div class="content-body common_container module_mod_bottom">
            <div class="menu">

                <div class="menu-item">
                    <span class="menu-tag">分类</span>
                    <div class="menu-item-tag">
                        <a class="item-tag" :class="filter.category==0 ? 'tag-selectd':''"
                           href="/storage">
                            全部
                        </a>
                        <a class="item-tag" :class="filter.category==item.id ? 'tag-selectd':'' "
                              v-for="item in category_list" :href="'/storage/'+item.id">
                            {{item.name}}
                        </a>
                    </div>
                </div>
                <div class="menu-item">
                    <span class="menu-tag">地区</span>
                    <div class="menu-item-tag">
                        <span class="item-tag" :class="filter.region==0 ? 'tag-selectd':''"
                              @click="filter.region=0">
                            全部
                        </span>
                        <span class="item-tag" :class="filter.region==item.id ? 'tag-selectd':'' "
                              v-for="item in region_list" @click="filter.region=item.id">
                            {{item.name}}
                        </span>
                    </div>
                </div>
                <div class="menu-item">
                    <span class="menu-tag">类型</span>
                    <div class="menu-item-tag">
                        <span class="item-tag" :class="filter.type==0 ? 'tag-selectd':''"
                              @click="filter.type=0">
                            全部
                        </span>
                        <span class="item-tag" :class="filter.type==item.id ? 'tag-selectd':'' "
                              v-for="item in type_list" @click="filter.type=item.id">
                            {{item.name}}
                        </span>
                    </div>
                </div>
                <div class="menu-item">
                    <span class="menu-tag">年代</span>
                    <div class="menu-item-tag">
                        <span class="item-tag" :class="filter.period==0 ? 'tag-selectd':''"
                              @click="filter.period=0">
                            全部
                        </span>
                        <span class="item-tag" :class="filter.period==item.id ? 'tag-selectd':'' "
                              v-for="item in period_list" @click="filter.period=item.id">
                            {{item.name}}
                        </span>
                    </div>
                </div>
                <div class="menu-item">
                    <span class="menu-tag">付费</span>
                    <div class="menu-item-tag">
                        <span class="item-tag" :class="filter.is_free==2 ? 'tag-selectd':''"
                              @click="filter.is_free=2">
                            全部
                        </span>
                        <span class="item-tag" :class="filter.is_free==1 ? 'tag-selectd':''"
                              @click="filter.is_free=1">
                            免费
                        </span>
                        <span class="item-tag" :class="filter.is_free==0 ? 'tag-selectd':''"
                              @click="filter.is_free=0">
                            付费
                        </span>
                    </div>
                </div>
                <div class="menu-item">
                    <span class="menu-tag">排序</span>
                    <div class="menu-item-tag" style="border-bottom: none">
                        <span class="item-tag" :class="filter.ordering=='-order' ? 'tag-selectd':''"
                              @click="filter.ordering='-order'">
                            全部
                        </span>
                        <span class="item-tag" :class="filter.ordering=='-pub_time' ? 'tag-selectd':''"
                              @click="filter.ordering='-pub_time'">
                            最新发布
                        </span>
                        <span class="item-tag" :class="filter.ordering=='-score' ? 'tag-selectd':''"
                              @click="filter.ordering='-score'">
                            评分最高
                        </span>
                        <span class="item-tag" :class="filter.ordering=='-heat' ? 'tag-selectd':''"
                              @click="filter.ordering='-heat'">
                            最受欢迎
                        </span>
                    </div>
                </div>

            </div>
            <div class="content">
                <div class="video-card" v-for="item in video_info_list">
                    <a :href="`/video/${item.id}`">
                        <div class="card-image">
                            <img :src="item.image_url">
                            <div class="tag free-tag" v-if="item.is_free">
                                免费
                            </div>
                            <div class="tag vip-tag" v-else>
                                VIP
                            </div>
                            <span class="card-info status">{{item.sections_status}}</span>
                        </div>
                    </a>
                    <div class="card-content">
                        <a :href="`/video/${item.id}`">
                            <span class="content-title">{{item.title}}</span>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import Header from "../components/Header"

    export default {
        name: "Storage",
        data() {
            return {
                video_info_list : [], // 视频信息列表
                category_list: [], // 视频分类列表
                region_list: [], // 视频地区列表
                type_list: [], // 视频类型列表
                period_list: [], // 视频年代列表
                filter: {
                    category: 0, // 当前用户选择的视频分类，刚进入页面默认为全部，值为0
                    region: 0, // 当前用户选择的地区分类，刚进入页面默认为全部，值为0
                    type: 0, // 当前用户选择的类型分类，刚进入页面默认为全部，值为0
                    period: 0, // 当前用户选择的年代分类，刚进入页面默认为全部，值为0
                    is_free: 2, // 当前用户选择的付费分类，刚进入页面默认为全部，值为2
                    ordering: "-order",    // 数据的排序方式，默认值是-id，表示对于id进行降序排列
                    // page_size: 2,       // 单页数据量
                    // page: 1,
                }
            }
        },
        components: {
            Header
        },
        methods: {
            get_filter_info() {
                // console.log(this.$route)
                // 获取类别分类id
                this.filter.category = this.$route.params.pk;
                if (!this.filter.category) {
                    this.filter.category = 0;
                }
                // // 获取地区分类id
                // this.filter.region = this.$route.query.region;
                // if (!this.filter.region) {
                //     this.filter.region = 0;
                // }
                // // 获取类型分类id
                // this.filter.type = this.$route.query.type;
                // if (!this.filter.type) {
                //     this.filter.type = 0;
                // }
                // // 获取年代分类id
                // this.filter.period = this.$route.query.period;
                // if (!this.filter.period) {
                //     this.filter.period = 0;
                // }
                // // 获取付费分类
                // this.filter.is_free = this.$route.query.is_free;
                // if (!this.filter.is_free) {
                //     this.filter.is_free = 2;
                // }
            },
            get_category() {
                // 获取课程分类信息
                this.$axios.get(`${this.$settings.base_url}/video/category`).then(response => {
                    this.category_list = response.data;
                }).catch(() => {
                    this.$message({
                        message: "获取电影分类信息有误，请联系客服工作人员",
                    })
                })
            },
            get_region() {
                // 获取课程地区信息
                this.$axios.get(`${this.$settings.base_url}/video/region`).then(response => {
                    this.region_list = response.data;
                }).catch(() => {
                    this.$message({
                        message: "获取电影地区信息有误，请联系客服工作人员",
                    })
                })
            },
            get_type() {
                // 获取课程地区信息
                this.$axios.get(`${this.$settings.base_url}/video/type`).then(response => {
                    this.type_list = response.data;
                }).catch(() => {
                    this.$message({
                        message: "获取电影类型信息有误，请联系客服工作人员",
                    })
                })
            },
            get_period() {
                // 获取课程地区信息
                this.$axios.get(`${this.$settings.base_url}/video/period`).then(response => {
                    this.period_list = response.data;
                }).catch(() => {
                    this.$message({
                        message: "获取电影年代信息有误，请联系客服工作人员",
                    })
                })
            },
            get_video(){
                // 定义过滤数据
                let filters = {
                    ordering: this.filter.ordering, // 排序
                };
                // 判断是否进行对视频进行分类的筛选展示
                if (this.filter.category != 0) {    // 使用弱判断
                    filters.category = this.filter.category;
                }
                // 判断是否进行对视频进行地区的筛选展示
                if (this.filter.region != 0) {
                    filters.region = this.filter.region;
                }
                // 判断是否进行对视频进行类型的筛选展示
                if (this.filter.type != 0) {
                    filters.type = this.filter.type;
                }
                // 判断是否进行对视频进行年代的筛选展示
                if (this.filter.period != 0) {
                    filters.period = this.filter.period;
                }
                // 判断是否进行对视频进行免费的筛选展示
                if (this.filter.is_free != 2) {
                    filters.is_free = this.filter.is_free;
                }

                // 获取信息
                this.$axios.get(`${this.$settings.base_url}/video/video`,{
                    params: filters // 请求参数
                }).then(response => {
                    this.video_info_list = response.data;
                    // console.log(this.video_info_list)
                }).catch(() => {
                    this.$message({
                        message: "获取电影信息有误，请联系客服工作人员",
                    })
                })
            },

        },
        mounted() {
            $(".context_link a").css("color", "#333");
            $("a").css("text-decoration", "none");
        },
        created() {
            this.get_filter_info();
            this.get_category();
            this.get_region();
            this.get_type();
            this.get_period();
            this.get_video();
        },
        watch:{
            "filter.region": function () {
                this.get_video()
            },
            "filter.type": function () {
                this.get_video()
            },
            "filter.period": function () {
                this.get_video()
            },
            "filter.is_free": function () {
                this.get_video()
            },
            "filter.ordering": function () {
                this.get_video()
            },
        }
    }
</script>

<style scoped>
    .storage {
        clear: both;
    }

    .header {
        background: white;
        box-shadow: 0 2px 6px rgba(0, 0, 0, .1);
        position: relative;
    }

    .common_container {
        margin: 0 100px;
    }

    .module_mod_bottom {
        margin-bottom: 30px !important;
    }

    .menu {
        position: relative;
        margin: 30px 0;
        background: #f8f8f8;
        width: 100%;
        height: 100%;
        padding: 30px 50px 0;
    }

    .menu-item {
        padding: 0 0 10px;
        position: relative;
        margin-bottom: 10px;
    }

    .menu-tag {
        position: absolute;
        left: 0;
        top: 0;
        display: inline-block;
        line-height: 26px;
        background: #e6f2ff;
        border-radius: 13px;
        font-size: 13px;
        color: #148aff;
        padding: 0 10px;
    }

    .menu-item-tag {
        margin-left: 76px;
        padding-bottom: 6px;
        border-bottom: 1px solid #ebebeb;
        width: 90%;
        height: 100%;
    }

    .item-tag {
        display: inline-block;
        padding: 0 15px;
        color: #333;
        font-size: 13px;
        margin-right: 14px;
        line-height: 28px;
        margin-bottom: 10px;
    }

    .menu-item-tag span:hover {
        cursor: pointer;
    }

    .tag-selectd {
        background: #148aff;
        border-radius: 13px;
        color: #fff;
        line-height: 28px;
        margin-bottom: 10px;
    }

    .content{
        width: 100%;
        height: 100%;
        margin: 10px auto;
    }
    .video-card{
        width: 16.666667%;
        height: 320px;
        display: inline-block;
        padding: 5px;
        margin-bottom: 50px;
    }
    .card-image{
        padding: 10px 5px;
        position: relative;
        width: 100%;
        height: 100%;
    }
    .card-info{
        position: absolute;
        float: right;
        top: 88%;
        right: 6%;
        font-size: 16px;
        font-weight: 700;
    }
    .tag{
        position: absolute;
        float: right;
        right: 5%;
        top: 5px;
        color: white;
        font-size: 12px;
        text-align: center;
        width: 33px;
    }
    .vip-tag{
        background: #ebba73;
    }
    .free-tag{
        background: #fc4273;
    }
    .status{
        font-size: 12px;
        line-height: 20px;
        color: #fff;
        background: rgba(0,0,0,.6);
        padding: 0 10px;
        border-radius: 10px;
    }
    /*.card-score{*/
    /*    position: absolute;*/
    /*    float: right;*/
    /*    top: 89%;*/
    /*    right: 7%;*/
    /*    color: #fff;*/
    /*    font-size: 13px;*/
    /*    !*font-weight: 700;*!*/
    /*}*/

    .content-title{
        font-weight: 700;
        color: #333;
        font-size: 15px;
        margin-left: 5px;
    }
    .content-title:hover{
        color: #0d9bff;
    }

    img{
        border-radius: 5px;
        width: 100%;
        height: 100%;
        /*transition: all .5s ease-in-out;*/
        transition: all .5s linear;
        opacity: 3;
        background: linear-gradient(0.2deg,transparent,rgba(0,0,0,.6));
    }

    img:hover {
        /*transform: scale(1.1);*/
        transform: translateY(-7px);
        box-shadow: 0 0 6px #000;
    }

    a:hover{
        text-decoration: none;
    }
</style>